<template>
  <div class="sixModule">
    <div id="sixModule" style="width: 100%;height: 100%"></div>
  </div>
</template>
<script>
import {removeStore} from "@/libs/storage";
import {getCountJyhy, getCountZydqfb} from "@/api/chart/chart";

export default {
  data() {
    return {
      chart: '',
      data:  [
        {value: 1048, name: '云南'},
        {value: 735, name: '河北'},
        {value: 580, name: '江苏'},
        {value: 484, name: '北京'},
        {value: 300, name: '浙江'},
        {value: 300, name: '山东'},
        {
          itemStyle: {
            color: 'none',
            decal: {
              symbol: 'none'
            }
          },
        }
      ]
    }
  },
  methods: {
    init() {
      this.chart = echarts.init(document.getElementById('sixModule'))
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          right: '10%',
          width: '30%',
          bottom: '30%',
        },

        series: [
          {
            type: 'pie',
            center: ['30%', '50%'],
            radius: ['30%', '80%'],
            roseType: 'area',
            avoidLabelOverlap: false,
            label: {
              // show: false,
              // position: 'center'
              normal: {
                position: 'inner',
                show: true,
                formatter: function (params) {
                  // console.log(params, '----')
                  if (params.percent > 10) {
                    return params.percent + '%'
                  } else return ''
                }
                // formatter:'{d}%'
              }
            },

            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = [
                    'rgb(54, 78, 216)',
                    'rgb(70, 220, 134)',
                    'rgb(255, 138, 0)',
                    'rgb(255, 197, 41)',
                    'rgb(72, 174, 255)',
                  ];
                  return colorList[colors.dataIndex]
                }
              }
            },
            data: this.data
          }
        ]
      }
      this.chart.setOption(option)
    },
    async getXData() {
      const res = await getCountZydqfb()
      if (res.success) {
        this.data = res.result.map(e => {
          return {name: e.xData, value: e.yData}
        })
      }
    }
  },
  async mounted() {
    await this.getXData()
    this.init()
  }
}
</script>

<style scoped lang="less">
.sixModule {
  width: 100%;
  height: 100%;
}
</style>